---
title: W3cubDocs API Documentation
layout: default
className: index-page
---
<style type="text/css">
@media (max-width: 370px) { ._nav-link, ._nav-link:hover {padding: 0 .45rem;}} 
.f { text-align: center; background: #efefef; }
._icon {display: inline-block;width: 72px;height: 72px;background-image: url(/images/w3cub.png);background-repeat: no-repeat;}
.loaded { background-image:url('{% asset logo/sprite.png @path %}') !important;}
</style>
{% asset logo/sprite.css @inline %}
<section class="_container index">
  <div class="_content" style="padding-bottom: 120px;">
    <ul class="_list">
      {% for link in site.data.docs %}
      <li class="_list-item _list-dir" title="">
        <a href="/{{link.slug}}/" aria-label="{{link.name}} {{link.version}}" title="{{link.name}} {{link.version}}">
          <span class="img-wrap">
            <logo class="_icon _icon-{{link.slug | split: '~' | first }}"></logo>
            {%if link.version and link.version != "" %}
            <span class="version">{{link.version}}</span>
            {%endif%}
          </span>
          <span class="name">{{link.name}}</span>
        </a>
      </li>
      {% endfor %}
    </ul>
    <div class="_attribution"><p class="_attribution-p f">The open source project, make learning more easy ❤️.<br>
      Licensed under the terms of the Mozilla Public License v2.0
    <br>Copyright © 2015-2024 W3cubDocs
  </p></div>
  </div>
</section>
<script>
;(function(){
  setTimeout(function(){
    var spriteImg = new Image();
    var n = Date.now();
    spriteImg.onload = function () {
      var list = document.querySelectorAll('._icon');
      [].map.call(list, function(element) {
        element.classList.add('loaded');
      });
      gtag && gtag("event", "spl", {
        t: Date.now() - n
      });
    }
    spriteImg.src = '{% asset logo/sprite.png @path %}';
  }, 0)
})();
</script>